<template>
    <div>
        <van-nav-bar title="影院">
            <template #left>
                <div @click="handleCity">{{ cityStore.cityName }}</div>
            </template>
            <template #right>
                <van-icon name="search" size="22" color="black" />
            </template>
        </van-nav-bar>
        <select v-model="type">
            <option :value="1">App订票</option>
            <option :value="0">前台兑换</option>
        </select>
        <ul>
            <li v-for="item in cinemaStore.computedCinemaList(type)" :key="item.cinemaId">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import useCinemaStore from '../store/cinemaStore.js';
import useCityStore from '../store/cityStore';
import { NavBar as vanNavBar, Icon as vanIcon } from 'vant';
import { useRouter } from "vue-router";

const type = ref(1)

const cinemaStore = useCinemaStore()
const cityStore = useCityStore()
const router = useRouter()

onMounted(() => {
    if (cinemaStore.cinemaList.length === 0) { //升级
        console.log("cinemaList首次请求");
        //请求数据
        cinemaStore.getCinemaList(cityStore.cityId)
    } else {
        console.log("走缓存-vca");
    }
})

const handleCity = () => {
    router.push("/city")

    //清空数据：如果这里不清空数据，cinemaStore.cinemaList.length>0，导致后面选择城市后不会重新请求
    cinemaStore.clearCinemaList()
}

</script>

<style scoped>
ul li {
    padding: 10px;

}
</style>